<template>
  <div class="app-init classification">
    <!-- 头部 -->
     <div class="classification-header">
      <HeaderCommon title="分类"></HeaderCommon>
    </div>
    <!-- 主体 -->
    <div class="wrap-box">
      <!-- 左边导航条 -->
      <div class="left-menu absolute scroll-box" ref="left">
        <ul>
          <li class="item" v-for="(target, index) in dataItem" :key="index" :class="{ 'active': index == active }" @click="jumpToTarget(index)">{{target.name}}</li>
        </ul>
      </div>
      <!-- 右边 -->
      <div class="right-box absolute scroll-box" ref="rightView">
        <ul>
          <li class="item" v-for="(target, index) in dataItem" :key="index">
            <p class="title">
              <span>{{target.name}}</span>
            </p>
            <div class="shop-item-wrap clear">
              <div class="shop-item" v-for="(shop, index) in target.children" :key="index" @click="$router.openPage(shop.link)">
                <p><img :src="shop.src" alt=""></p>
                <p class="name">{{shop.name}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderCommon from '../../components/header-commom.vue'
// import _ from 'lodash'
import StorageUtil from '../../utils/storage.js'

const storage = new StorageUtil()
export default {
data(){
      return {
        active: 0,
        dataItem: [
          {
            name: '新品',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },{
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '手机',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '电视',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '电脑',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '家电',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '路由',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '智能',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '电源',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '耳机',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '音箱',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '礼品',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '生活',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '米粉卡',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          },
          {
            name: '零售店',
            children: [
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              },
              {
                name: '小米5s',
                src: 'http://qiniu.verydog.cn//show.liluo.cc/img_0505.png',
                link: '/detail/1019'
              }
            ]
          }
        ],

        offset: []
      }
},
components: {
  HeaderCommon,
},
computed: {},
watch: {},
methods: {
  jumpToTarget(index){
    this.active = index
    this.$refs.rightView.scrollTop = this.offset[index]
  }
},
created() {
},
mounted() {
  //!设置offset数组的值，动态获取
  const views = this.$refs.rightView.querySelectorAll('.item')
  // _.reduce(this.$refs.rightView.querySelectorAll('.item'),(pre,cur)=>{
  //   this.offset.push(pre)
  //   return pre+cur
  // },0)
  setTimeout(()=>{
    let sum = 0
    for(let i=0;i<views.length;i++){
    //?scroll client offset 
    this.offset.push(sum)
    sum += views[i].offsetHeight
  }

  //?当active的是最后几个的时候，左边不会跟着右边滚动
  this.$refs.rightView.addEventListener('scroll',()=>{
    const scrollTop = this.$refs.rightView.scrollTop
    for(let i=0;i<this.offset.length;i++){
      if(this.offset[i]<=scrollTop){
        this.active = i
      }
    }
  })
  },100)
  


  const scrollDB = {
        left: storage.getItem('classification-left-scrollTop')|0,
        right: storage.getItem('classification-right-scrollTop')|0,
        active: storage.getItem('classification-active')|0
  }
  setTimeout(()=>{
       this.$refs.left.scrollTop = scrollDB.left
        this.$refs.rightView.scrollTop = scrollDB.right
        this.active = scrollDB.active
  },10)

    
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeUnmount() {}, //生命周期 - 销毁之前
unmounted() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发


beforeRouteLeave (to, from, next) {
  //保存active
  storage.setItem('classification-left-scrollTop',this.$refs.left.scrollTop)
  storage.setItem('classification-right-scrollTop',this.$refs.rightView.scrollTop)
  storage.setItem('classification-active',this.active)
  next()
}
}


</script>
<style scoped lang="sass">

  .classification
    background-color: #fff

    .wrap-box
      position: absolute
      width: 100%
      top: 1.5625rem
      left: 0px
      bottom: 1.43rem

    .left-menu
      width: 2.07812rem
      left: 0px
      top: 0px
      bottom: 0px
      border-right: 1px solid #efefef
      overflow-x: hidden
      box-sizing: border-box

      ul
        padding-bottom: 0.44rem
      li.item
        margin-top: 0.875rem
        text-align: center
        -webkit-transition: all .1s ease
        transition: all .1s ease
      li.item.active
        // 选中后颜色改变，同时略微变大
        color: #fb7d34
        transform: scale(1.2)
    .right-box
      left:  2.07812rem
      top: 0px
      right: 0px
      bottom: 0px
      .item
        padding-top: 0.8rem
      .title
        text-align: center
        padding-bottom: 0.2rem
        span
          position: relative
          display: inline-block

          &:after,&:before
            display: inline-block
            width: 0.53125rem
            height: 1px
            top: 50%
            background-color: #e0e0e0
            position: absolute
            content: ''

          &:after
            left: -0.78125rem
          &:before
            right: -0.78125rem
      .shop-item-wrap
        .shop-item
          text-align: center
          float: left
          width: 33.3%
          color: #757575
          margin-bottom: 0.1rem
          font-size: 0.34rem
          img
            width: 1.25rem
            padding-bottom: 0.1rem
</style>